<!-- 身份证拍照识别 -->
<template>
	<view class="take-idCard-box" v-show="takeIdCardShow" :class="takeIdCardAddClass ? 'on':''" catchtouchmove='true'>
		<view class="drawer"></view>
		<view class="IDcard-box">
			<text class="text">请拍摄身份证人面像</text>
			<view class="camera-box">
				<view class="IDcard"><image src="../../static/id-portrait.png" class="portrait"></image></view>
				<camera class="camera" device-position="back"></camera>
				<view class="IDcard-preview" v-if="photoSrc">
					<image :src="photoSrc"></image>
				</view>
			</view>
		</view>
		
		<view class="button-box">
			<view class="line" type="default" @tap="takePhoto">
				<view class="circle"></view>
			</view>
		</view>
		
		<view class="close" @click="close()">
			<u-icon name="close" color="#414141" size="24"></u-icon>
		</view>
		
	</view>
</template>

<script>
	import { BASE_URL } from '@/utils/request'
	export default {
		name: "takeIdCard",
		props: ["takeIdCardShow", "takeIdCardAddClass"],
		data() {
			return {
				photoSrc: '',
			};
		},
		methods: {
			takePhoto() {
				const camera = uni.createCameraContext()
				camera.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log('拍照成功', res)
						this.photoSrc = res.tempImagePath
						this.handleImg(res.tempImagePath)
					},
					fail: () => {
						console.log('拍照失败')
					}
				})
			},
			/**
			 * 处理图片
			 */
			handleImg(photoSrc) {
				console.log('处理图片', photoSrc)
				uni.showLoading({
					title:'处理中'
				})
				
				
				uni.uploadFile({
					url: BASE_URL + 'ocr/idCard', //post请求的地址
					filePath: photoSrc,
					fileType: 'image',
					name: 'file',
					success: (res) => {
						let data = JSON.parse(res.data).data
						this.photoSrc = ''
						this.$emit('takeIdCardNumber', data)
						uni.hideLoading()
						uni.showToast({
							title: '识别成功，请校验~',
							icon: 'none',
							duration: 2000
						})
						this.close()
					},
					fail: (error) => {
						console.log('error', error)
						uni.showToast({
							title: '网络超时，请重试~',
							icon: 'none',
							duration: 2000
						})
						this.photoSrc = ''
						uni.hideLoading()
					}
				})
			},
			/**
			 * 关闭弹窗
			 */
			close() {
				this.$emit('takeIdCardRemoveClass', false)
				setTimeout(()=>{
					this.$emit('takeIdCardClose', false)
				},250)
			},
		}
	}
</script>

<style lang="scss">
	.take-idCard-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .25s ease-in-out 0s;
		opacity: 0;
		transform: scale(1.2);
		
		.drawer {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 2;

		}
	}

	.take-idCard-box.on {
		opacity: 1;
		transform: scale(1, 1);
	}
	
	.IDcard-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		
		.camera-box {
			width: 668rpx;
			height: 420rpx;
			top: 25%;
			left: calc(50% - 334rpx);
			position: fixed;
			border-radius: 20rpx;
			overflow: hidden;
			z-index: 100;
			.IDcard {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				box-shadow: rgba(55, 55, 55, .2) 0 0 0 2005rpx;
				border: 2rpx dotted #FFFFFF;
				
				.portrait {
					width: 240rpx;
					height: 256rpx;
					position: absolute;
					z-index: 9;
					top: 40rpx;
					right: 32rpx;
				}
			}
			
			.camera {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		.text {
			width: 100%;
			display: block;
			text-align: center;
			color: #FFFFFF;
			position: fixed;
			z-index: 9;
			top: 20%;
		}
	
	}
	
	.button-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		bottom: 0;
		padding-bottom: 60rpx;
		z-index: 9;
		.line {
			width: 130rpx;
			height: 130rpx;
			border-radius: 300rpx;
			border: 6rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: transparent;
	
			.circle {
				width: 100rpx;
				height: 100rpx;
				border-radius: 300rpx;
				background-color: #FFFFFF;
			}
		}
	}
	
	.IDcard-preview {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
	
		img {
			width: 100%;
			height: 100%;
		}
	}
	
	
	
	.close{
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border-radius: 100rpx;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		z-index: 9999;
	}
	
</style>
